前言

在Vue的應用中, 多個組件的配置中容易會有共用的配置
比如說 fileter, 共用函數, mixin, 自定義指令等等
這些都會在main.js中建立Vue實例之前完成
那一個比較大型的專案中, 共用的功能會越來越多
為了保持main.js的可讀性
Vue給予引入插件的功能

插件

簡而言之, 插件就是一個加強Vue實例的工具
在Vue實例建立前安裝插件, 可以有效寫一些前端功能的時候更加的方便
程式碼的可讀性可以再更上一層樓

使用方式：

use :

// 此階段再 Vue實例之前
import plugins from './plugins.js'
Vue.use(plugins);

plugins是額外建立的 js文件
其內部放了許多Vue相關的插件
不一定要用plugins命名, 只是plugins有外掛, 插件等意思使用比較直觀的命名對開發有好處
而對於Vue而言, 使用插件必須利用Vue.use()這項配置
其會找尋插件中的配置
並且帶入Vue的構造函數以及參數給予插件使用

plugins.js

export default {
	install(vue, option){
		//...全局配置函數, 對象
        Vue.filte(...),
        Vue.Vue.directives(...),
        ...
	}
}

在設計一個插件中
第一步即是將配置export, 這邊使用的是默認配置
第二步是建立一個函數 install()
Vue.use在安裝插件的時候, 會找尋插件中 install()這個函數
命名不對是沒辦法使用插件的

install(Vue, option)
在 install會放入需要的全局配置
那在 VueComponent或是 Vue都可以使用到該函數, 對象
而 install()內部的參數中

1. Vue：
   其可以接受到 vue的構造函數
   可以使用其構造函數做配置

2. option：
   針對使用者對裡面傳的參數
   可用可不用, 看需求設計

補充

1.在使用插件的時候, Vue.use()這對函數, 必須在 Vue實例的建立之前
所有的全局配置都是為了 Vue實例, 以及其底下的組件
若順序寫錯了, 那該底下的組件對象會沒有全局配置可用

2.Vue的插件並不同意使用多個插件
Vue.use會阻止多個插件的註冊
所以插件的設計, 勁量考量大局觀, 確定能夠作為共用的功能在安裝到插件

3.Vue官網中也有提供設計好的插件
有興趣都可以到Vue的官網中試用看看這些插件